<style lang="less">
</style>

<template>
    <div style="padding-left: 80px">
        <el-form
            :model="queryForm"
            label-width="130px"
            :rules="rules"
            ref="addform"
            label-suffix="："
        >
            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('姓名')" prop="studentName">
                        <!-- <el-select
                            v-model="queryForm.studentId"
                            clearable
                            filterable
                            remote
                            reserve-keyword
                            @change="changeClick"
                            :remote-method="remoteMethodOne"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in options.approver"
                                :key="item.code"
                                :label="item.codeAndName"
                                :value="item.code"
                                @click.native.stop="clickName(item)"
                            >
                            </el-option>
                        </el-select> -->
                        <el-input
                            v-model="queryForm.studentName"
                            clearable
                            disabled
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('手机号码')" label-width="130px" prop="telephone">
                        <el-input
                            v-model="queryForm.telephone"
                            :placeholder="$t('contentsOfStudyingAbroad.pleaseEnter')"
                            clearable
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('邮箱地址')" label-width="130px" prop="mail">
                        <el-input
                            v-model="queryForm.mail"
                            maxlength="64"
                            :placeholder="$t('contentsOfStudyingAbroad.pleaseEnter')"
                            clearable
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :getter="10">
                <el-col :span="20" v-if="options.subName.length>0">
                     <el-form-item label="竞赛小类" prop="subName">
                        <el-select v-model="queryForm.subName" clearable style="width: 100%">
                            <el-option
                                v-for="item in options.subName"
                                :key="item.id"
                                :label="item.subName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog
            width="25%"
            ref="innerDialog"
            :title="$t('graduateBase.prompt')"
            :visible.sync="innerVisible"
            append-to-body
            :top="'28vh'"
        >
            <div style="text-align: left; margin-bottom: 25px">
                {{ $t('graduateBase.cancelTip') }}
            </div>
            <div style="text-align: right">
                <el-button type="primary" @click="confirmInner">
                    {{ $t('common.btn.confirm') }}
                </el-button>
                <el-button @click="cancelInner">{{ $t('common.btn.cancel') }}</el-button>
                <el-button type="primary" @click="confirmAndClose">
                    {{ $t('graduateBase.saveAndClose') }}
                </el-button>
            </div>
        </el-dialog>
        <el-row type="flex" class="row-bg" justify="end">
            <el-button @click="cancelDialog">{{ $t('contentsOfStudyingAbroad.cancel') }}</el-button>
            <el-button type="primary" @click="conserve">
                {{ $t('确定') }}
            </el-button>
        </el-row>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import comRegistration from 'common/src/api/competitionRegistration/comRegistration'

export default {
    props: {
        dataSignUp: {
            type: Object,
        },

        dataQueryForm: {
            type: Object,
        },
    },
    data() {
        // 校验手机号码
        let validateNum = (rule, value, callback) => {
            let regExp = /^1[23456789]\d{9}$/
            if (!regExp.test(value)) {
                callback(new Error(this.$t('projectApplication.validateStudentPhone')))
            } else {
                callback()
            }
        }
        // 验证电子邮箱
        let validateNumEmail = (rule, value, callback) => {
            let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            if (!reg.test(value) || value === '') {
                return callback(new Error(this.$t('interdisciplinaryManagement.pleaseEnter')))
            }
            return callback()
        }
        return {
            test: '',
            testArr: [],
            textarea: '',
            fileList: [],
            queryForm: {
                studentId: '',
                studentName: '',
                name: '',
                telephone: '',
                mail: '',
                code: '',
                subName: ''
            },
            innerVisible: false,
            id: '',
            restaurants: [],
            formsLearn: [],
            options: {
                approver: [],
                sex: [],
                subName: []
            },
            listName: '',
            rules: {
                studentId: [{ required: true, message: this.$t('请输入姓名'), trigger: 'change' }],
                telephone: [{ required: true, validator: validateNum, trigger: 'change' }],
                mail: [{ required: true, validator: validateNumEmail, trigger: 'change' }],
                subName: [{ required: true, message: '请选择竞赛小类' , trigger: 'change' }]
            },
        }
    },
    computed: {
        params() {
            return {
                ...this.dataSignUp,
                signRecordDTO: {
                    studentList: [
                        {
                            studentId: this.queryForm.studentId,
                            studentName: this.queryForm.studentName,
                            telephone: this.queryForm.telephone,
                            mail: this.queryForm.mail,
                        },
                    ],
                },
                userInfo: {} // 获取当前用户auths权限
            }
        },
    },
    mounted() {
        this.getSubName()
        this.getOptions()
        if (this.dataQueryForm) {
            this.queryForm = {}
            this.queryForm = _.cloneDeep(this.dataQueryForm)
        }
        // 获取当前用户auths权限
        if (localStorage.getItem("sessiondata")) {
            if (JSON.parse(localStorage.getItem("sessiondata")).mockUser) {
                this.userInfo = JSON.parse(localStorage.getItem("sessiondata")).mockUser
            } else {
                this.userInfo = JSON.parse(localStorage.getItem("sessiondata")).user
            }
        }
        // if (this.$store.state.session.mockUser) {
        comRegistration
            .getStudentInfo({
                condition: {
                    codeOrName: this.userInfo.uid,
                },
                pageSize_: 100,
                pageNum_: 0,
            })
            .then((res) => {
                if (res.code === 200 && res.data.list) {
                    res.data.list.forEach((el) => {
                        this.$set(this.queryForm,'telephone',el.telephone)
                        this.$set(this.queryForm,'studentName',el.name)
                        this.$set(this.queryForm,'studentId',el.code)
                        this.$set(this.queryForm,'mail',el.mail)
                    })
                }
            })
        // }
    },
    methods: {
        // 根据竞赛id获取竞赛小类集合
        getSubName() {
            let jsId = this.dataSignUp.competitionId // 获取竞赛id
            comRegistration.getSubCompetitions(jsId).then(res => {
                this.options.subName = res.data
            })
        },
        clickName(item) {
            this.queryForm.name = item.name
        },
        // 查询学生信息
        changeClick(val) {
            this.options.approver.forEach((el) => {
                if (el.code == val) {
                    this.queryForm.codeOrName = el.codeAndName
                    this.queryForm.telephone = el.telephone
                    this.queryForm.mail = el.mail
                } else {
                    this.options.approver = []
                }
            })
        },

        // 学生信息改变获取数据
        remoteMethodOne(query) {
            if (query !== '') {
                comRegistration
                    .getStudentInfo({
                        condition: {
                            codeOrName: query,
                        },
                        pageSize_: 100,
                        pageNum_: 0,
                    })
                    .then((res) => {
                        if (res && res.code == 200) {
                            this.options.approver = res.data.list
                        }
                    })
            } else {
                this.options.approver = []
            }
        },
        // 过滤$符号
        checkSpecial(rule, value, callback) {
            let regEn = /[`$]/im
            if (regEn.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback()
            } else {
                return callback()
            }
        },
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'G_XBIE'],
            }
            queryDic(data).then((res) => {
                UTILS.fillSelect(
                    {
                        title: 'profession',
                        sex: 'G_XBIE',
                    },
                    res.data,
                    this.options
                )
            })
        },

        // 内层弹出确定
        confirmInner() {
            this.dataSignUp = {}
            this.listName = ''
            this.$refs['addform'].resetFields()
            this.innerVisible = false
            this.$emit('cancel-dialog', false)
        },
        // 内层弹出取消
        cancelInner() {
            this.innerVisible = false
        },
        // 内层弹出保存关闭
        confirmAndClose() {
            this.innerVisible = false
            this.conserve()
        },
        // 取消
        cancelDialog() {
            this.$refs['addform'].resetFields()
            this.$emit('cancel-dialog', false)
        },

        // 保存
        conserve() {
            this.$refs['addform'].validate((valid) => {
                if (valid) {
                    let par = {}
                    par = JSON.parse(JSON.stringify(this.params))
                    par.subId = this.queryForm.subName?this.queryForm.subName:null
                    comRegistration.signUp(par).then((res) => {
                        this.$message.success(this.$t('internship.successfully'))
                        this.innerVisible = false
                        this.$emit('change-exam',1)
                        this.$refs['addform'].resetFields()
                    })
                }
            })
        },
    },
}
</script>
